import React, { Component } from "react";
import { Calendar, Card, List, Avatar, Modal, Table } from "antd";
import "./index.scss";
import { http } from "../../api/index";
import moment from "moment";
import { baseURL } from "../../api/ajax";
import { HashHistory } from "../../utils";
import {
  LikeTwoTone,
  HeartTwoTone,
  CrownTwoTone,
  SettingTwoTone,
  RocketTwoTone,
  TrophyTwoTone,
  BulbTwoTone,
} from "@ant-design/icons";
import * as echarts from "echarts";
function onPanelChange(value, mode) {
  console.log(value, mode);
}
const gridStyle = {
  width: "20%",
  textAlign: "center",
};

export default class HomeCpt extends Component {
  state = {
    data: [],
    isModalVisible: false,
    annoList: [],
    columns: [
      {
        title: "序号",
        key: "",
        dataIndex: "",
        render: (v, item, index) => {
          return index;
        },
        align: "center",
      },
      {
        title: "标题",
        dataIndex: "title",
        key: "title",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "头像",
        dataIndex: "avatar",
        key: "avatar",
        render: (v, item, index) => {
          return <Avatar src={v.replace(/public/, baseURL)} />;
        },
        align: "center",
      },
      {
        title: "发布者",
        dataIndex: "username",
        key: "username",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "起始时间",
        dataIndex: "startTime",
        key: "startTime",
        render: (v, item, index) => {
          return moment(v).format("YYYY-MM-DD");
        },
        align: "center",
      },
      {
        title: "结束时间",
        dataIndex: "endTime",
        key: "endTime",
        render: (v, item, index) => {
          return moment(v).format("YYYY-MM-DD");
        },
        align: "center",
      },
      {
        title: "内容",
        dataIndex: "content",
        key: "content",

        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "类型",
        dataIndex: "type",
        key: "type",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
    ],
  };
  componentDidMount() {
    http.announceList().then((res) => {
      if (res.data.code == 200) {
        this.setState({
          data: res.data.val.slice(0, 4),
          annoList: res.data.val,
        });
      }
    });
    http
      .userlist({
        phone: localStorage.phone,
      })
      .then((res) => {
        if (res.data.code == 200) {
          //   console.log(res.data.val);
          this.dataInit(res.data.val);
        }
      });
    http.userall().then((res) => {
      if (res.data.code == 200) {
        // console.log(res.data.val);
        this.userInit(res.data.val);
      }
    });
  }
  userInit = (datalist) => {
    var myChart = echarts.init(document.getElementById("users"));
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: datalist.filter((item) => item.role == 0).length,
              name: "普通用户",
            },
            {
              value: datalist.filter((item) => item.role == 1).length,
              name: "会员用户",
            },
            {
              value: datalist.filter((item) => item.role == 2).length,
              name: "管理员",
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  };
  dataInit = (userdata) => {
    var myChart = echarts.init(document.getElementById("mydata"));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "我的数据",
      },
      tooltip: {},
      legend: {
        data: ["数量"],
      },
      xAxis: {
        data: ["点赞", "收藏", "评论"],
      },
      yAxis: {},
      series: [
        {
          name: "数量",
          type: "bar",
          data: [userdata.starArr.length, userdata.collectArr.length, 0],
        },
      ],
    };
    myChart.setOption(option);
  };
  annonList = () => {
    this.setState({
      isModalVisible: true,
    });
  };
  handleOk = () => {
    this.setState({
      isModalVisible: false,
    });
  };
  handleCancel = () => {
    this.setState({
      isModalVisible: false,
    });
  };
  render() {
    const { annoList, isModalVisible, columns } = this.state;
    return (
      <div className="home" style={{ width: "100%", height: "100%" }}>
        <div
          style={{
            width: "100%",
            height: "40%",
            display: "flex",
            marginBottom: 30,
          }}
        >
          <div style={{ width: "60%", height: "100%" }}>
            <h1>快捷入口</h1>

            <div style={{}}>
              <Card.Grid
                style={
                  (gridStyle,
                  {
                    width: "20%",
                    marginRight: 8,
                    marginBottom: 10,
                    borderRadius: "3px solid #f0f0f0",
                  })
                }
                onClick={() => {
                  HashHistory.push("/main/tiku/experience/explist");
                }}
              >
                <CrownTwoTone
                  twoToneColor="#8b28f4"
                  style={{
                    fontSize: 24,
                    marginRight: 10,
                  }}
                />
                <span style={{ fontSize: 8 }}>面试经验</span>
              </Card.Grid>
              <Card.Grid
                style={
                  (gridStyle,
                  {
                    width: "20%",
                    marginRight: 8,
                    marginBottom: 10,
                    borderRadius: "3px solid #f0f0f0",
                  })
                }
                onClick={() => {
                  HashHistory.push("/main/tiku/choose/list");
                }}
              >
                <RocketTwoTone
                  twoToneColor="#f5bd0e"
                  style={{
                    fontSize: 24,
                    marginRight: 10,
                  }}
                />
                <span style={{ fontSize: 8 }}>选择冲关</span>
              </Card.Grid>
              <Card.Grid
                style={
                  (gridStyle,
                  { width: "20%", marginRight: 8, marginBottom: 10 })
                }
                onClick={() => {
                  HashHistory.push("/main/tiku/choose/list");
                }}
              >
                <TrophyTwoTone
                  twoToneColor="#00dfb6"
                  style={{
                    fontSize: 24,
                    marginRight: 10,
                  }}
                />
                <span style={{ fontSize: 8 }}>套题练习</span>
              </Card.Grid>
              <Card.Grid
                style={
                  (gridStyle,
                  {
                    width: "20%",
                    marginRight: 8,
                    marginBottom: 10,
                    borderRadius: "3px solid #f0f0f0",
                  })
                }
                onClick={() => {
                  HashHistory.push("/main/person/collect");
                }}
              >
                <HeartTwoTone
                  twoToneColor="#fd3148"
                  style={{ fontSize: 24, marginRight: 10 }}
                />
                <span style={{ fontSize: 8 }}>我的收藏</span>
              </Card.Grid>
              <Card.Grid
                style={
                  (gridStyle,
                  {
                    width: "20%",
                    marginRight: 8,
                    marginBottom: 10,
                    borderRadius: "3px solid #f0f0f0",
                  })
                }
                onClick={() => {
                  HashHistory.push("/main/person/star");
                }}
              >
                <LikeTwoTone
                  twoToneColor="#fa4b8e"
                  style={{ fontSize: 24, marginRight: 10 }}
                />
                <span style={{ fontSize: 8 }}>我的点赞</span>
              </Card.Grid>
              <Card.Grid
                style={
                  (gridStyle,
                  {
                    width: "20%",
                    marginRight: 8,
                    marginBottom: 10,
                    borderRadius: "3px solid #f0f0f0",
                  })
                }
                onClick={() => {
                  HashHistory.push("/main/person/changepass");
                }}
              >
                <SettingTwoTone
                  twoToneColor="#00e498"
                  style={{ fontSize: 24, marginRight: 10 }}
                />
                <span style={{ fontSize: 8 }}>修改密码</span>
              </Card.Grid>
              <Card.Grid
                style={
                  (gridStyle,
                  {
                    width: "20%",
                    marginRight: 8,
                    marginBottom: 10,
                    borderRadius: "3px solid #f0f0f0",
                  })
                }
                onClick={() => {
                  HashHistory.push("/main/retroaction/list");
                }}
              >
                <BulbTwoTone
                  twoToneColor="#4b74f1"
                  style={{ fontSize: 24, marginRight: 10 }}
                />
                <span style={{ fontSize: 8 }}>意见反馈</span>
              </Card.Grid>
            </div>
          </div>
          <div style={{ width: "40%", height: "100%" }}>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <h1>通知</h1>
              <span onClick={this.annonList} style={{ cursor: "pointer" }}>
                查看详情
              </span>
            </div>
            {this.state.data && (
              <List
                size="small"
                // header={<div>查看详情</div>}
                itemLayout="horizontal"
                dataSource={this.state.data}
                renderItem={(item) => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={
                        <Avatar src={item.avatar.replace(/public/, baseURL)} />
                      }
                      title={item.title}
                    />
                    <div>
                      {moment(item.startTime).format("YYYY-MM-DD")}-
                      {moment(item.endTime).format("YYYY-MM-DD")}
                    </div>
                  </List.Item>
                )}
              />
            )}
          </div>
        </div>
        <div
          style={{
            width: "100%",
            height: "55%",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <div style={{ width: "25%", height: "100%" }}>
            <h1>日历</h1>
            <div className="site-calendar-demo-card">
              <Calendar fullscreen={false} onPanelChange={onPanelChange} />
            </div>
          </div>
          <div style={{ width: "30%", height: "100%" }}>
            <div id="users" style={{ width: "100%", height: 400 }}></div>
          </div>
          <div style={{ width: "30%", height: "100%" }}>
            <div id="mydata" style={{ width: "100%", height: 400 }}></div>
          </div>
        </div>
        <Modal
          title="公告详情"
          visible={isModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={1000}
        >
          {annoList && (
            <Table
              columns={columns}
              dataSource={annoList}
              style={{ marginTop: 10, width: "100%" }}
              bordered
              size="small"
              id="mytable"
              rowKey={(item) => item._id}
              pagination={{ pageSize: 10 }}
            />
          )}
        </Modal>
      </div>
    );
  }
}
